<template>
  <div class="app">
    <van-nav-bar
      title="在线支付"
      left-text=""
      left-arrow
      @click="backlink()"
    ></van-nav-bar>
    <div class="money">￥{{ zhujiaoinfo.dashangmoney }}</div>
    <div class="tableorder">
      <div class="boxtitle">
        <div class="shuxian"></div>
        <div class="datetitle">支付方式</div>
      </div>
      <div class="paybox">
        <van-radio-group v-model="checked">
          <van-cell-group inset>
            <van-cell
              clickable
              @click="checked = '1'"
              style="padding: 10px 2px"
            >
              <template #title>
                <div style="display: flex; align-items: center">
                  <icon-svg
                    icon-class="paycard"
                    icon-color="#304056"
                    class="payicon"
                  ></icon-svg>
                  <span class="custom-title">储值卡支付</span>
                </div>
              </template>
              <template #right-icon>
                <van-radio name="1" />
              </template>
            </van-cell>
            <van-cell
              clickable
              @click="checked = '2'"
              style="padding: 10px 2px"
            >
              <template #title>
                <div style="display: flex; align-items: center">
                  <icon-svg
                    icon-class="weixinpay"
                    icon-color="#304056"
                    class="payicon"
                  ></icon-svg>
                  <span class="custom-title">微信支付</span>
                </div>
              </template>
              <template #right-icon>
                <van-radio name="2" />
              </template>
            </van-cell>
            <van-cell
              clickable
              @click="checked = '3'"
              style="padding: 10px 2px"
            >
              <template #title>
                <div style="display: flex; align-items: center">
                  <icon-svg
                    icon-class="alipay"
                    icon-color="#304056"
                    class="payicon"
                  ></icon-svg>
                  <span class="custom-title">支付宝支付</span>
                </div>
              </template>
              <template #right-icon>
                <van-radio name="3" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
      </div>
    </div>
    <div class="paybtnbox">
      <van-button type="primary" class="paybtn" @click="pay">
        确认支付
      </van-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      zhujiaoinfo: {},
      checked: "1",
    };
  },
  methods: {
    backlink() {
      this.$router.back();
    },
    pay() {},
  },
  created() {
    this.zhujiaoinfo = JSON.parse(this.$route.params.zhujiaoinfo);
  },
};
</script>

<style scoped>
.app {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: #f2f3f5;
}
.money {
  width: 100%;
  margin: 10px auto;
  height: 90px;
  background-color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
}
.tableorder {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  background-color: white;
}
.boxtitle {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}
.shuxian {
  width: 4px;
  height: 18px;
  background-color: #5e94fe;
  border-radius: 3px;
}
.datetitle {
  font-size: 18px;
  line-height: 25px;
  margin-left: 5px;
  font-weight: 550;
}
.paybox {
  width: 100%;
}
.paybox .van-cell-group--inset {
  margin: 0 !important;
}
.payicon {
  width: 30px;
  height: 30px;
  margin-right: 5px;
}
.paybtnbox {
  display: flex;
  justify-content: center;
  margin-top: 15px;
}
.paybtn {
  width: 90%;
  border-radius: 25px;
}
</style>